<template>
  <div>
    <el-dialog v-model="showSetUser" title="修改用户" width="40%">
      <el-form
        :model="form"
        label-width="80px"
        status-icon
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input
            v-model="form.username"
            disabled
            :placeholder="scope.row.username"
          />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onsubmit(ruleFormRef)">
            提交
          </el-button>
          <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script setup>
import { defineProps, computed, defineEmits, reactive } from "vue";
import { setUserList } from "@/api/userList";
import { ElMessage, ElMessageBox } from "element-plus";
const props = defineProps({
  showSetUser: {
    type: Boolean,
    default: false,
  },
  getList: {
    type: Function,
  },
  tableScope: {
    type: Object,
  },
});
const emit = defineEmits(["update:showSetUser"]);
let ruleFormRef = reactive({});
let rules = {
  email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }],
};
const form = reactive({
  username: "",
  email: "",
  mobile: "",
});
let showSetUser = computed({
  get() {
    return props.showSetUser;
  },
  set(newv) {
    emit("update:showSetUser", newv);
  },
});
let scope = computed(() => {
  return props.tableScope;
});
const closeDialog = (ruleFormRef = null) => {
  if (ruleFormRef != null) ruleFormRef.resetFields();
  emit("update:showSetUser", false);
};
const onsubmit = (ruleFormRef) => {
  ruleFormRef.validate(async (isValid) => {
    if (isValid) {
      let res = await setUserList(Number(scope.value.row.id), {
        email: form.email,
        mobile: form.mobile,
      });
      ElMessageBox.alert(res.meta.msg, "", {
        // if you want to disable its autofocus
        // autofocus: false,
        confirmButtonText: "确认",
        callback: () => {
          let ls = res.meta.status >= 200 && res.meta.status < 300;
          ElMessage({
            type: ls ? "success" : "error",
            message: ls ? "修改成功" : "修改失败",
          });
        },
      });
      closeDialog();
      ruleFormRef.resetFields();
      props.getList();
    }
  });
};
</script>
  
  <style lang="scss" scoped>
.el-dialog {
  padding: 100px;
}
</style>